<div [@routerTransition]>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            库位详细信息
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-subheader">
                <div class="align-items-center row" style="margin: 0;">
                    <div class="float-left" style="min-width: 200px;">
                        <label>仓库编号:</label>
                        <input
                            [(ngModel)]="f_WarehouseCode"
                            style="width: 140px; display: inline-block; margin: 0 10px;"
                            name="f_WarehouseCode"
                            #nameInput="ngModel"
                            class="form-control m-input"
                            type="text"
                        />
                    </div>
                    <div class="float-left" style="min-width: 200px;">
                        <label for="f_StorageAreaNum">库位编号: </label>
                        <input
                            id="f_StorageAreaNum"
                            style="width: 140px; display: inline-block; margin: 0 10px;"
                            #nameInput="ngModel"
                            class="form-control"
                            type="text"
                            name="f_StorageAreaNum"
                            [(ngModel)]="f_StorageAreaNum"
                            maxlength="32"
                        />
                    </div>

                    <div class="float-left" style="min-width: 180px;">
                        <label for="f_StorageAreaType" class="float-left" style="padding-top: 6px;">仓库类型: </label>
                        <camc-dropdown
                            class="float-left"
                            id="f_StorageAreaType"
                            [options]="storageAreaTypeOptions"
                            name="f_StorageAreaType"
                            [(ngModel)]="f_StorageAreaType"
                            [style]="{ width: '200px', margin: '0 10px', border: 'none' }"
                            placeholder="请选择库位类型"
                        >
                        </camc-dropdown>
                    </div>

                    <!-- <div class="float-left" style="min-width: 180px;margin-left:10px;">
                                                                <label for="f_StockType" class="float-left" style="padding-top: 6px;">库存类型: </label>
                                                                <camc-dropdown
                                                                    class="float-left"
                                                                    id="f_StockType"
                                                                    [options]="stockTypeOptions"
                                                                    name="f_StockType"
                                                                    [(ngModel)]="f_StockType"
                                                                    [style]="{ width: '40px', margin: '0 10px', border: 'none' }"
                                                                    placeholder="请选择库存类型"
                                                                >
                                                                </camc-dropdown>
                                                        </div> -->

                    <div class="float-left mr-auto" style="min-width: 80px;">
                        <button (click)="getLocationData($event)" class="btn btn-primary blue" type="submit">
                            <i class="flaticon-search-1" [attr.aria-label]="l('Search')"> </i> 查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body" style="border-top: 1px solid #ebedf2;  margin-top: 11px;">
                <div class="m-subheader">
                    <div class="align-items-center row" style="margin: 0;">
                        <div class="float-right ml-auto" style="margin-left: 10px; min-width: 160px;">
                            <button
                                (click)="createOrEditlocationModal.show(undefined, roomId)"
                                *ngIf="permission.isGranted('Pages.Administration.Roles')"
                                class="btn btn-primary blue"
                            >
                                新增
                            </button>

                            <button
                                (click)="createOrEditlocationModal.show(selectedValue.id, roomId)"
                                class="btn btn-primary blue"
                                type="submit"
                            >
                                <i [attr.aria-label]="l('Update')"> </i> 更新
                            </button>
                            <button (click)="deletePosition(selectedValue.id)" class="btn btn-danger" type="submit">
                                <i [attr.aria-label]="l('Delete')"> </i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                <div class="tabbable-line">
                    <div class="tab-content" style="padding-top:0;">
                        <div class="tab-pane active" id="tab-model">
                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <p-table
                                        #dataTable
                                        (onLazyLoad)="getLocationData($event)"
                                        [value]="primengTableHelper.records"
                                        [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                        [paginator]="false"
                                        [lazy]="true"
                                        [scrollable]="true"
                                        ScrollWidth="100%"
                                        [responsive]="primengTableHelper.isResponsive"
                                        [resizableColumns]="primengTableHelper.resizableColumns"
                                        [(selection)]="selectedValue"
                                        selectionMode="single"
                                    >
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 40px">
                                                    序号
                                                </th>
                                                <ng-container *ngFor="let ext of extensions">
                                                    <th width="{{ ext.width }}">
                                                        {{ ext.title }}
                                                    </th>
                                                </ng-container>
                                            </tr>
                                        </ng-template>

                                        <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                            <tr [pSelectableRow]="record">
                                                <td style="width: 40px">
                                                    {{ i + 1 + paginator.first }}
                                                </td>
                                                <ng-container *ngFor="let ext of extensions">
                                                    <ng-container [ngSwitch]="ext.formatType">
                                                        <ng-container *ngSwitchCase="1">
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] | number: '1.0-0' }}
                                                            </td>
                                                        </ng-container>
                                                        <ng-container *ngSwitchCase="2">
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] | number: '1.2-2' }}
                                                            </td>
                                                        </ng-container>
                                                        <ng-container *ngSwitchCase="4">
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                            </td>
                                                        </ng-container>
                                                        <ng-container *ngSwitchDefault>
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] }}
                                                            </td>
                                                        </ng-container>
                                                    </ng-container>
                                                </ng-container>
                                            </tr>
                                        </ng-template>
                                    </p-table>

                                    <div class="primeng-paging-container">
                                        <p-paginator
                                            [rows]="20"
                                            #paginator
                                            (onPageChange)="getLocationData($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                        >
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <createOrEditlocationModal #createOrEditlocationModal (modalSave)="getLocationData()"></createOrEditlocationModal>
</div>
